<template>
  <div>
    <!-- 语音识别模块 -->
    <div
      class="speechRecognition"
      :style="{bottom:($store.state.isShowSpeechRecognition?'12.5px':'-400px')}"
    >
      <div class="speechClose" @click="speechClose()"></div>
      <div class="speechInfo">{{speechInfo}}</div>
      <div class="startOrEndVoice" @touchstart="startRecord" @touchend="stopRecord"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      // 语音识别提ad示信息
      speechInfo: "按住下方按钮后说出您想去的地方",
      // 微信调用录音接口得到的录音文件
      localId: null
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    // 开始录音
    startRecord() {
      this.speechInfo = "请说话...";

      wx.ready(() => {
        wx.startRecord();
      });
    },
    // 结束录音
    stopRecord() {
      const self = this;
      this.speechInfo = "正在识别...";

      wx.ready(() => {
        wx.stopRecord({
          success: function(res) {
            self.localId = res.localId;
            self.translateVoice();
          },
          fail: function(res) {
            self.speechInfo = "语音识别失败，请重试~";
          }
        });
      });
    },
    // 语音识别
    translateVoice() {
      const self = this;
      wx.ready(() => {
        wx.translateVoice({
          localId: self.localId, // 需要识别的音频的本地Id，由录音相关接口获得
          isShowProgressTips: 1, // 默认为1，显示进度提示
          success: function(res) {
            if (res.translateResult != undefined) {
              var translateResult = res.translateResult.replace(
                /[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\。|\，|\>|\/|\?]/g,
                ""
              );
              self.speechInfo = `识别结果为 "${translateResult}"？如若不是请重试`;

              // 更新输入框内容

              self.$store.commit("updataSearchInputVal", translateResult);

              // 模糊搜索
              if(translateResult.length != 0){
                
              }
              this.$store.commit("updateIsShowFuzzySearchPart", true);
              this.$store.commit("updateIsShowSearchContent", false);
              // 将输入内容进行模糊搜索
              this.matchData(this.searchShopVal.toUpperCase(), false);
            } else {
              self.speechInfo = "语音识别失败，请重试~";
            }
          },
          fail: function(res) {
            self.speechInfo = "语音识别失败，请重试~";
          }
        });
      });
    },
    // 关闭语音识别提示模块
    speechClose() {
      this.$store.commit("updateIsShowSpeechRecognition", false);

      this.stopRecord();

      // 重置语音识别提示信息
      this.speechInfo = "按住下方按钮后说出您想去的地方";
    }
  },
  components: {}
};
</script>

<style lang='less'>
/* 语音识别 */
.speechRecognition {
  position: fixed;
  left: 50%;
  bottom: -400px;
  transform: translateX(-50%);
  width: 352px;
  height: 225px;
  background-color: #f7f7f7;
  z-index: 1200;
  border-radius: 6px;
  transition: all 0.5s;
  .speechClose {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 17.5px;
    height: 17.5px;
    background: url("../assets/images/gb.png") no-repeat center;
    background-size: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    border: 1px solid #818181;
  }
  .speechInfo {
    width: 80%;
    height: 50px;
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: #6c6c6c;
    text-align: center;
    line-height: 50px;
  }
  .startOrEndVoice {
    position: absolute;
    left: 50%;
    bottom: 25px;
    width: 75px;
    height: 75px;
    transform: translateX(-50%);
    background: url("../assets/images/voicesearch.png") no-repeat center;
    background-size: contain;
    border-radius: 50%;
    box-shadow: 0px 0px 10px #c0c0c0;
  }
}
</style>
